<script lang="ts" setup>
import { ref, reactive, toRefs } from 'vue'
import FormConfig from './components/FormConfig.vue'
import FormItem from './components2/formItem.vue'
import FormChild from './components2/FormChild.tsx'
import { Member, UserInfo } from './enum'
import LaunchTabs from './components3/LaunchTabs.vue'

// interface Member {
//     id: number
//     name: string
//     type?: string
//     children?: Member[]
// }
// interface UserInfo {
//     name: string
//     age?: number
// }
const arr: Member[] = reactive([
    {
        id: 1,
        name: 'zhen',
        type: '',
        children: []
    },
    {
        id: 3,
        name: 'chen',
        type: '',
        children: [
            {
                id: 31,
                name: 'chen1',
                children: []
            },
            {
                id: 32,
                name: 'chen2',
                children: []
            }
        ]
    },
    {
        id: 2,
        name: 'wang',
        type: '',
        children: [
            {
                id: 21,
                name: 'shuo',
                type: '',
                children: []
            },
            {
                id: 22,
                name: 'duo',
                type: 'child',
                children: [
                    {
                        id: 221,
                        name: 'duoduo1',
                        type: '',
                        children: []
                    },
                    {
                        id: 222,
                        name: 'niuniu1',
                        type: '',
                        children: []
                    }
                ]
            }
        ]
    }
])
const dataJson: UserInfo = reactive({
    name: 'zhen',
    age: 29
})
const userInfo: UserInfo = reactive({
    name: 'chen',
    age: 26
})

setTimeout(() => {
    userInfo.name = 'Petter'
}, 3000)
let newUserInfo = {...userInfo}
let name = ref(userInfo.name)
const changeUpdate = () => {
    console.log(999, 'changeUpdate')
}
</script>
<template>
    <div class="slot-warpper">
        <div>我是Index‘多层嵌套’{{ name }}</div>
        <div>userInfo=={{ userInfo.name }}--{{ userInfo.age }}</div>
        <div>newUserInfo=={{ newUserInfo.name }}--{{ newUserInfo.age }}</div>
        <form-config :config="arr" :dataJson="dataJson"></form-config>
    </div>
    <div class="form-item-warpper">
        <div>简单嵌套 Slot</div>
        <FormItem>
            <template #tabForm="{ data, update}">
                <input @input="changeUpdate" />
            </template>
        </FormItem>
        <FormChild>
            <template #renderHeader>
                <span>renderHeader</span>
            </template>
        </FormChild>
    </div>
    <div class="form-item-wapper2">
        <div>获取嵌套slot中的组件ref值</div>
        <LaunchTabs>
            <template #launchContent>
                <div>我是launchContent</div>
            </template>
        </LaunchTabs>
    </div>
</template>
<style>
.slot-warpper {
    width: 500px;
    margin:0 auto;
}
.form-item-warpper {
    background: #eee;
    width: 500px;
    min-height: 200px;
    margin:0 auto;
}
</style>
